@extends('layouts.h5')

@section('title', '视频播放')

@section('styles')
    <style type="text/css">
        video::-webkit-media-controls {
            display: none !important;
        }
    </style>
@stop

@section('content')
    <div style="padding-top: 66%; position: relative;">
        <canvas id="canvas"
                style="position:absolute;width: 100%; height: 100%; left: 0;top: 0; object-fit: fill;"></canvas>
        <div id="mask" style="position: absolute; width: 100%; height: 100%; left: 0;top: 0;"></div>
    </div>
@stop

@section('foot')
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext("2d");
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;

        var video = document.createElement('video');
        video.setAttribute('src', '//1253629067.vod2.myqcloud.com/a182116bvodcq1253629067/b89999385285890805263465995/f0.mp4');
        video.setAttribute('poster', 'https://shop.gzdsx.cn/storage/image/2020/03/wlJOz4swKuguDeDx6fKcVN9PcHCIgZnvVOwuuLqM.jpeg');
        video.setAttribute('webkit-playsinline', true);
        video.setAttribute('playsinline', true);
        video.setAttribute('x5-playsinline', true);
        video.setAttribute('x5-video-player-fullscreen', true);
        video.setAttribute('x5-video-player-type', 'h5');
        video.setAttribute('preload', 'auto');

        var img = new Image();
        img.src = 'https://shop.gzdsx.cn/storage/image/2020/03/wlJOz4swKuguDeDx6fKcVN9PcHCIgZnvVOwuuLqM.jpeg';
        img.onload = function () {
            context.drawImage(img, 0, 0, width, height);
        }

        video.addEventListener('timeupdate', function (o) {
            console.log(o);
        }, false);

        video.addEventListener('canplay', function () {
            video.play();
            setCanvasSize();
            drawFrame();
        });

        var mask = document.getElementById('mask');
        mask.addEventListener('click', function () {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        });

        function drawFrame() {
            context.drawImage(video, 0, 0, width, height);
            drawText();
            requestAnimationFrame(drawFrame);
        }

        function drawText() {
            // 设置字体
            context.font = "18px bold 黑体";
            // 设置颜色
            context.fillStyle = "#ff0";
            // 设置水平对齐方式
            context.textAlign = "center";
            // 设置垂直对齐方式
            context.textBaseline = "middle";
            // 绘制文字（参数：要写的字，x坐标，y坐标）
            context.fillText("要写的文字", 100, 100);
        }

        function setCanvasSize() {
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
        }
    </script>
@stop
